<script setup>
import { ref } from 'vue'
import WelfareCard from './components/WelfareCard.vue'
const options = [
  {
    value: '未融资',
    label: '未融资'
  },
  {
    value: '天使轮',
    label: '天使轮'
  },
  {
    value: 'A轮',
    label: 'A轮'
  },
  {
    value: 'B轮',
    label: 'B轮'
  },
  {
    value: 'C轮',
    label: 'C轮'
  },
  {
    value: 'D轮及以上',
    label: 'D轮及以上'
  },
  {
    value: '已上市',
    label: '已上市'
  },
  {
    value: '不需要融资',
    label: '不需要融资'
  }
]

const options1 = [
  {
    value: '0-20人',
    label: '0-20人'
  },
  {
    value: '20-99人',
    label: '20-99人'
  },
  {
    value: '100-499人',
    label: '100-499人'
  },
  {
    value: '500-999人',
    label: '500-999人'
  },
  {
    value: '1000-9999人',
    label: '1000-9999人'
  },
  {
    value: '10000人以上',
    label: '10000人以上'
  }
]

const leftMenu = [
  { text: '公司基本信息', status: '4/6' },
  { text: '公司福利', status: '1/2' },
  { text: '公司介绍', status: '未完善' },
  { text: '主营业务', status: '未完善' },
  { text: '公司相册', status: '未完善' },
  { text: '公司视频', status: '未完善' },
  { text: 'VR实景', status: '未完善' },
  { text: '人才发展', status: '未完善' },
  { text: '在职感受', status: '未完善' },
  { text: '产品介绍', status: '未完善' },
  { text: '高管介绍', status: '未完善' }
]

const activeTab = ref(0)
const activeName = ref('first')

// 设置激活的Tab
function setActiveTab(index) {
  activeTab.value = index
}
</script>

<template>
  <div class="company_content">
    <div class="wrapper">
      <div class="left">
        <div class="company_side">
          <h3>编辑公司信息</h3>
          <div class="sub_title">请认真阅读并遵守《公司信息填写须知》</div>
          <div class="company_appeal">
            <div class="hint_left_tip">
              <div class="hint_content">
                <p>
                  你的公司主页吸引力
                  <span>一般</span>
                </p>
                <div class="hint_tip">未达到同行业基础水平，影响招聘</div>
              </div>
              <div class="cirole_container">
                <svg data-v-7fc27a1e="" viewBox="0 0 100 100">
                  <path
                    data-v-7fc27a1e=""
                    d="M 50 50 m 0 -45 a 45 45 0 1 1 0 90 a 45 45 0 1 1 0 -90"
                    stroke="#FFEEE9"
                    stroke-width="9.5"
                    fill="none"
                    class="el-progress-circle__track"
                  ></path>
                  <path
                    data-v-7fc27a1e=""
                    d="M 50 50 m 0 -45 a 45 45 0 1 1 0 90 a 45 45 0 1 1 0 -90"
                    stroke-linecap="round"
                    stroke="#FF9A77"
                    stroke-width="9.5"
                    fill="none"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 284.314px, 284.314px;
                      stroke-dashoffset: 244.51px;
                      transition:
                        stroke-dashoffset 0.6s,
                        stroke 0.6s;
                    "
                  ></path>
                </svg>
                <div class="value">14%</div>
              </div>
            </div>
            <div class="xhz"></div>
            <div class="detail_title">完善3项信息，提升公司主页曝光率</div>
          </div>
        </div>
        <div
          v-for="(item, index) in leftMenu"
          :key="index"
          @click="setActiveTab(index)"
          class="company_message"
          :class="{ active: activeTab === index }"
        >
          <div class="text">{{ item.text }}</div>
          <div class="op">
            {{ item.status }}
            <ArrowRight style="width: 1em; height: 1em; margin-left: 10px" />
          </div>
        </div>
      </div>

      <div class="right">
        <div v-if="activeTab === 0" class="company_info">
          <h4>公司基本信息</h4>
          <div class="module_desc">
            <div class="title">填写公司基本信息有什么用？</div>
            <div class="desc">
              丰富的公司介绍，能获得更多求职者的青睐，为你的职位带来更多查看与沟通。
            </div>
          </div>
          <div class="form">
            <div class="form_item_logo">
              <div class="form_item">公司Logo：</div>
              <div class="add_icon">
                <Plus style="width: 2em; height: 2em; margin-top: 10px" />
                <div class="btn_icon">上传logo</div>
              </div>
            </div>
            <div class="logo_default">
              <Warning style="width: 1em; height: 1em" />
              若不想使用当前logo，可以
              <span>恢复默认</span>
            </div>
            <div class="item_content">
              <div class="item_label">品牌名称:</div>
              <input type="text" placeholder="请填写品牌名称" />
            </div>
            <div class="item_content">
              <div class="item_label">公司全称:</div>
              <input type="text" placeholder="请填写公司全称" />
            </div>
            <div class="item_content">
              <div class="item_label">所在行业:</div>
              <input type="text" placeholder="请选择公司行业" />
            </div>
            <div class="item_content">
              <div class="item_label">所在行业:</div>
              <el-select
                v-model="value"
                placeholder="请选择"
                style="width: 300px; height: 34px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="item_content">
              <div class="item_label">所在行业:</div>
              <el-select
                v-model="value"
                placeholder="0-20人"
                style="width: 300px; height: 34px"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div class="footer_nav">
          <div class="footer">
            <div class="tip_content">
              上传注意事项
              <QuestionFilled style="width: 1em; height: 1em" />
            </div>
            <div class="btn">保存</div>
          </div>
        </div>

        <div v-if="activeTab === 1" class="company_welfare">
          <div class="welfare_title_two">
            <div class="welfare_title">
              <span class="num">1</span>
              工作时间
            </div>
            <img
              src="https://static.zhipin.com/zhipin-boss/info/v5176/static/images/icon-welfare.png"
            />
            <div class="second_title">
              <span class="num_one">2</span>
              公司福利
              <span class="num_box">0/20</span>
            </div>
          </div>
          <div class="c_module_desc">
            <div class="effect">填写公司福利有什么用？</div>
            <p class="research">
              公司福利是公司基本信息之一，调研显示85%的牛人看公司时会关注公司福利信息；完善后，该类信息可作为公司亮点展示在不同推荐列表，吸引求职者关注。
            </p>
          </div>
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="保险" name="first">
              <div class="card_layout">
                <WelfareCard></WelfareCard>
                <WelfareCard></WelfareCard>
                <WelfareCard></WelfareCard>
                <WelfareCard></WelfareCard>
              </div>
            </el-tab-pane>
            <el-tab-pane label="薪资期权" name="second">Config</el-tab-pane>
            <el-tab-pane label="度假休假" name="third">Role</el-tab-pane>
            <el-tab-pane label="生活补贴" name="fourth">Task</el-tab-pane>
            <el-tab-pane label="自定义" name="fifth">Task</el-tab-pane>
          </el-tabs>
        </div>

        <div v-if="activeTab === 2" class="company_info">
          <h4>公司基本信息</h4>
          <div class="module_desc">
            <div class="title">填写公司基本信息有什么用？</div>
            <div class="desc">
              <p>
                公司介绍是公司基本信息之一，详细公司介绍帮助牛人全面认识公司、了解公司，降低沟通成本，有效吸引牛人。
              </p>
              <p>* 你可以根据优质范例，使用内容模版高效填写哦</p>
            </div>
            <p class="operate">
              牛人想看这些信息吗
              <DArrowRight style="width: 1em; height: 1em" />
            </p>
          </div>
          <div class="textarea_content">
            <span>一句话介绍</span>
            <span class="tip">(非必填)</span>
          </div>
          <div class="content">
            <div class="input_wrap input_wrap_textarea">
              <textarea
                wrap="soft"
                autocomplete="on"
                spellcheck="false"
                placeholder="一句话介绍公司，请输入20字以内的文字"
                rows="4"
                class="input"
              ></textarea>
            </div>
            <p class="count_tip">
              <span>0</span>
              /20
            </p>
          </div>
          <div class="textarea_content">
            <span>公司简介</span>
          </div>
          <div class="content">
            <div class="input_wrap input_wrap_textarea">
              <textarea
                wrap="soft"
                autocomplete="on"
                spellcheck="false"
                placeholder="业务模式，公司规模等"
                rows="4"
                class="input"
              ></textarea>
            </div>
            <p class="count_tip">
              <span>0</span>
              /1000
            </p>
          </div>
        </div>

        <div v-if="activeTab === 3" class="company_info">
          <h4>编辑公司主营业务</h4>
          <div class="module_desc">
            <div class="title">填写公司主营业务有什么用？</div>
            <div class="desc">
              添加主营业务，方便求职者快速了解公司；平台也将根据你所填写的业务，更好的为您推荐符合要求的牛人；公司未来将出现在相应业务榜单下，增加公司曝光度。
            </div>
          </div>
        </div>

        <div v-if="activeTab === 4" class="company_info">
          <h4>公司相册</h4>
          <div class="module_desc">
            <div class="title">上传公司相册有什么用？</div>
            <div class="desc">
              丰富的公司环境图片、团建活动图片等可以让牛人直观感受公司氛围，有效吸引牛人。（最多可上传20张）
            </div>
          </div>
        </div>

        <div v-if="activeTab === 5" class="company_info">
          <h4>公司视频</h4>
          <div class="module_desc">
            <div class="title">上传公司视频有什么用？</div>
            <div class="desc">
              丰富的公司环境图片、团建活动图片等可以让牛人直观感受公司氛围，有效吸引牛人。（最多可上传20张）
            </div>
          </div>
        </div>

        <div v-if="activeTab === 6" class="company_info">
          <h4>VR实景</h4>
          <div class="module_desc">
            <div class="title">上传VR实景照片有什么用？</div>
            <div class="desc">
              展示公司真实环境，有助于提高牛人对公司的好感度，打消沟通前疑虑，进而提高招聘效率。
            </div>
          </div>
        </div>

        <div v-if="activeTab === 7" class="company_info">
          <h4>人才发展</h4>
          <div class="module_desc">
            <div class="title">填写人才发展有什么用？</div>
            <div class="desc">
              研究发现越来越多的求职者期望在工作中获得帮助与成长，完整的人才发展机制介绍可以有效吸引求职者。
            </div>
          </div>
        </div>

        <div v-if="activeTab === 8" class="company_info">
          <h4>在职感受</h4>
          <div class="module_desc">
            <div class="title">分享在职感受有什么用？</div>
            <div class="desc">
              以员工身份向牛人分享在职感受，可以增强牛人的信任感，提升牛人对公司的好感度，提高招聘效率。
            </div>
          </div>
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="我的在职感受" name="first">
              <el-empty description="暂未填写在职感受" />
              <div class="operate_one">
                <EditPen style="width: 1em; height: 1em" />
                填写在职感受
              </div>
            </el-tab-pane>
            <el-tab-pane label="同事的在职感受" name="second">
              <el-empty description="其他同事很懒，什么都没留下" />
            </el-tab-pane>
          </el-tabs>
        </div>

        <div v-if="activeTab === 9" class="company_info">
          <h4>产品介绍</h4>
          <div class="module_desc">
            <div class="title">填写产品介绍有什么用？</div>
            <div class="desc">
              公司主营产品，往往是牛人对公司认知的第一步；完整、详细的产品介绍可以让牛人快速感知公司经营内容，提高沟通效率。
            </div>
          </div>
        </div>

        <div v-if="activeTab === 10" class="company_info">
          <h4>高管介绍</h4>
          <div class="module_desc">
            <div class="title">填写高管介绍有什么用？</div>
            <div class="desc">
              靠谱的带队者是军心稳定的基石，详细的高管介绍可以让牛人快速感知公司实力，吸引牛人沟通投递。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.company_content .wrapper {
  display: flex;
}

.wrapper {
  margin: 0 auto;
  width: 1180px;
}

.left {
  width: 412px;
  overflow-y: auto;
  background-color: #f8f9fc;
  border-radius: 5px;
  .company_side {
    padding: 30px;
    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #171d26;
      line-height: 28px;
      margin-bottom: 8px;
    }
    .sub_title {
      cursor: pointer;
      line-height: 18px;
      color: #8d92a1;
      font-size: 13px;
    }
    .company_appeal {
      width: 331px;
      height: 113px;
      border-radius: 8px;
      padding: 12px;
      margin-top: 20px;
      border: 1px solid #ffe4da;
      .hint_left_tip {
        display: flex;
      }
      .cirole_container {
        position: relative;
        width: 42px;
        height: 42px;
        .value {
          position: absolute;
          top: 15px;
          left: 8px;
          text-align: center;
          font-weight: 800;
          font-size: 12px;
          line-height: 16px;
          color: rgb(240, 106, 58);
        }
      }
      .hint_content {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        line-height: 20px;
        margin-right: 80px;
        .hint_tip {
          font-size: 12px;
          color: #999;
          line-height: 17px;
          margin-top: 6px;
        }
        p span {
          display: inline-block;
          font-size: 12px;
          font-weight: 500;
          line-height: 16px;
          padding: 1px 6px;
          border-radius: 4px;
          margin-left: 6px;
          color: #f06a3a;
          background: rgba(240, 106, 58, 0.11);
        }
      }
    }
  }
}

.xhz {
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 1px;
  background-color: #d3d3d3;
  margin: 10px 0;
}

.detail_title {
  font-size: 12px;
  color: #5e5e5e;
  line-height: 20px;
}

.company_message {
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 0 40px;
  margin: 0 16px;
  line-height: 50px;
  border-radius: 8px;
  cursor: pointer;
  .text {
    font-weight: 500;
    color: #00a6a7;
    font-size: 16px;
  }
  .op {
    font-size: 13px;
    color: #00a6a7;
  }
  &:hover {
    background-color: #f5f5f5;
  }
}

.right {
  position: relative;
  width: 768px;
  background-color: #fff;
  border-radius: 5px;
  .company_info {
    padding: 30px;
    h4 {
      font-size: 20px;
      margin-bottom: 8px;
      color: #171d26;
    }
  }
}

.module_desc {
  position: relative;
  width: 678px;

  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  line-height: 20px;
  .title {
    font-weight: 500;
    color: #303640;
  }
  .desc {
    color: #8d97a6;
    margin-top: 5px;
  }
  .operate {
    position: absolute;
    position: absolute;
    min-width: 130px;
    color: #00a6a7;
    margin-left: 10px;
    cursor: pointer;
    top: 14px;
    right: 16px;
  }
}

.form {
  margin-top: 20px;
  font-size: 14px;
  line-height: 26px;
  .form_item_logo {
    display: flex;
    .form_item {
      color: #9fa3af;
      margin-right: 8px;
    }
  }
}

.add_icon {
  width: 88px;
  height: 88px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  text-align: center;
  color: #9fa3af;
  cursor: pointer;
  &:hover {
    color: #00a6a7;
    border: 1px solid #00a6a7;
  }
}

.logo_default {
  margin-left: 80px;
  margin-top: 8px;
  color: #8d97a6;
  span {
    color: #5c6573;
    cursor: pointer;
    font-weight: 500;
  }
}

.item_content {
  display: flex;
  margin-top: 20px;
  .item_label {
    color: #9fa3af;
    margin-right: 20px;
  }
  input {
    width: 300px;
    height: 34px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    &::placeholder {
      padding: 10px;
    }
  }
}

.footer_nav {
  position: absolute;
  padding: 25px;
  bottom: 0;
  left: 0;
  width: 768px;
  height: 74px;
  border-top: 1px solid #e0e0e0;
  .footer {
    display: flex;
    justify-content: space-between;
    .tip_content {
      color: #8d92a1;
      font-size: 13px;
      cursor: pointer;
    }
    .btn {
      width: 86px;
      height: 34px;
      background-color: #00bebd;
      text-align: center;
      line-height: 34px;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid #5dd5c8;
    }
  }
}

.company_message.active {
  background-color: #b3f2f2; /* 激活状态的背景色 */
}

.company_welfare {
  padding: 30px;
  .welfare_title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    .num {
      display: inline-block;
      margin-right: 4px;
      border-radius: 50%;
      text-align: center;
      width: 20px;
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      line-height: 20px;
      background-color: #66d6d6;
      vertical-align: middle;
    }
  }
}

.welfare_title_two {
  display: flex;
}

.second_title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #8d97a6;
  line-height: 28px;
  color: #171d26;
  .num_one {
    background: #00bebd;
    color: #fff;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    text-align: center;
    width: 20px;
    background: #f0f2f5;
    color: #8d97a6;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
  }
  .num_box {
    display: inline-block;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    color: #8d97a6;
    margin-left: 8px;
    color: #171d26;
  }
}

.c_module_desc {
  width: 688px;
  height: 98px;
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 24px;
  .effect {
    font-weight: 500;
    color: #303640;
  }
  .research {
    color: #8d97a6;
    margin-top: 5px;
  }
}

.card_layout {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  row-gap: 20px; /* 设置行间距，即上下间距 */
}

.textarea_content {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #171d26;
  line-height: 21px;
  .tip {
    font-size: 13px;
    font-weight: 400;
    color: #8d97a6;
    line-height: 18px;
    margin-left: 5px;
  }
}

.content {
  width: 100%;
  margin-top: 12px;
  position: relative;
  .input_wrap_textarea {
    width: 100%;
    min-width: auto;
  }
  .input_wrap {
    display: inline-block;
    line-height: normal;
    min-width: 300px;
    position: relative;
    vertical-align: middle;
    .input {
      color: #303640;
      border-radius: 4px;
    }
  }
}

textarea.input {
  font-size: 14px;
  height: auto;
  max-width: 100%;
  min-height: 34px;
  vertical-align: bottom;
}

.input {
  background-color: #fff;
  background-image: none;
  border: 1px solid #e3e7ed;
  cursor: text;
  display: inline-block;
  line-height: 1.5;
  padding: 5px 8px;
  position: relative;
  transition:
    border 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  width: 100%;
}

.count_tip {
  position: absolute;
  right: 10px;
  bottom: 2px;
  font-size: 12px;
  color: #999;
  background: hsla(0, 0%, 100%, 0.8);
}

.operate_one {
  width: 162px;
  padding: 9px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #00bebd;
  font-size: 16px;
  font-weight: 500;
  color: #00a6a7;
  line-height: 22px;
  cursor: pointer;
}
</style>
